/**
 * 学习目标：react - 卸载的生命周期
 * componentWillUnmount
 * 场景：清理定时器
 * 无论是vue2，vue3，小程序，react
 * 在组件销毁时(离开页面),一定要把定时器，绑定的事件给移除掉，否则非常影响性能
 */
import React from 'react';

export default class App extends React.Component {
  state = { isShow: true };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ isShow: !this.state.isShow });
          }}
        >
          点我切换Child
        </button>
        {this.state.isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  componentDidMount() {
    console.log('我是Child的componentDidMount -----> ');
    this.timer = setInterval(() => {
      console.log('我是定时器 -----> ');
    }, 1000);
  }
  componentWillUnmount() {
    console.log('我是Child的componentWillUnmount -----> ');
    clearInterval(this.timer);
  }
  render() {
    return <div>我是Child组件</div>;
  }
}
